import eventBus from "@/typings/GxEventBus";
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
import { Checkbox, message, Popconfirm, Table } from "antd";
import { CheckboxChangeEvent } from "antd/lib/checkbox";
import type { ColumnsType } from "antd/lib/table";
import { FC, ReactElement } from "react";
import { GxTask } from "@/typings/GxTask";
import { IPageProps } from '../index';
import { IFilter } from '@/typings/IFilter';

export interface ITaskRecordProps {
  id?: number;
  name: string;
  completed: boolean;
  notes?: string;
  cTime?: string;
  sTime?: string;
  dTime?: string;
  expend?: string;
}

interface IDelTaskProps {
  id: number;
}

// const data: ITaskRecordProps[] = [
//   {
//     id: 1111,
//     name: "编写Web开发流程规范文档",
//     completed: true,
//     sTime: "2022-06-18 09:30:00",
//     dTime: "2022-06-18 17:30:00",
//   },
//   {
//     id: 2222,
//     name: "前端入职人员技能培训",
//     completed: false,
//     sTime: "2022-06-27 13:30:00",
//     dTime: "2022-06-28 17:30:00",
//     notes: "下周开展",
//   },
//   {
//     id: 3333,
//     name: "xxxxxxxxx",
//     completed: false,
//     sTime: "2022-06-30 09:30:00",
//     dTime: "2022-06-30 17:30:00",
//   },
//   {
//     id: 4444,
//     name: "前端入职人员技能培训",
//     completed: false,
//     sTime: "2022-06-27 13:30:00",
//     dTime: "2022-06-28 17:30:00",
//     notes: "下周开展",
//   },
//   {
//     id: 5555,
//     name: "xxxxxxxxx",
//     completed: false,
//     sTime: "2022-06-30 09:30:00",
//     dTime: "2022-06-30 17:30:00",
//   },
//   {
//     id: 4444,
//     name: "前端入职人员技能培训",
//     completed: false,
//     sTime: "2022-06-27 13:30:00",
//     dTime: "2022-06-28 17:30:00",
//     notes: "下周开展",
//   },
//   {
//     id: 5555,
//     name: "xxxxxxxxx",
//     completed: false,
//     sTime: "2022-06-30 09:30:00",
//     dTime: "2022-06-30 17:30:00",
//   },
//   {
//     id: 4444,
//     name: "前端入职人员技能培训",
//     completed: false,
//     sTime: "2022-06-27 13:30:00",
//     dTime: "2022-06-28 17:30:00",
//     notes: "下周开展",
//   },
//   {
//     id: 5555,
//     name: "xxxxxxxxx",
//     completed: false,
//     sTime: "2022-06-30 09:30:00",
//     dTime: "2022-06-30 17:30:00",
//   },
//   {
//     id: 4444,
//     name: "前端入职人员技能培训",
//     completed: false,
//     sTime: "2022-06-27 13:30:00",
//     dTime: "2022-06-28 17:30:00",
//     notes: "下周开展",
//   },
//   {
//     id: 5555,
//     name: "xxxxxxxxx",
//     completed: false,
//     sTime: "2022-06-30 09:30:00",
//     dTime: "2022-06-30 17:30:00",
//   },
// ];

interface ITaskListProps {
  isLoading: boolean;
  filter:IFilter,
  page:IPageProps,
  taskList: GxTask[];
  completeTask: (id: number) => void;
  deleteTask: (id: number) => void;
  queryTasks:()=>void;
}

const TaskList: FC<ITaskListProps> = ({
  isLoading,
  filter,
  page,
  taskList,
  completeTask,
  deleteTask,
  queryTasks,
}): ReactElement => {

  /** 将表格中的编辑icon组件提取出来，复用 */
  const EditTaskComp: FC<ITaskRecordProps> = (props) => {
    return (
      <EditOutlined
        onClick={() => {
          /** 发布更改任务模态框visible 和 bEdit 两个事件 */
          eventBus.publish("setVisible", true);
          eventBus.publish("setTaskEdit", true);
          /** 编辑row的时候，发布一个事件，将当前编辑的record对象发布出去 */
          eventBus.publish("setTaskRecordProps", props);
        }}
        style={{ color: "orange", marginLeft: "5px" }}
      />
    );
  };

  const DeleteTaskComp: FC<IDelTaskProps> = ({ id }) => {
    return (
      <Popconfirm
        title="确定删除此任务吗?"
        onConfirm={()=>deleteTask(id)}
        okText="确定"
        cancelText="取消"
      >
        <DeleteOutlined style={{ color: "red" }} />
      </Popconfirm>
    );
  };

  const updateTaskStatus = (e: CheckboxChangeEvent, record:ITaskRecordProps) => {
    if (record.id) {
      completeTask(record.id);
    }
  };
 
  const columns: ColumnsType<ITaskRecordProps> = [
    {
      title: "序号",
      width: 150,
      align: "center",
      render: (text, record, index) => `${index + 1}`, // 显示每一行的序号
    },
    {
      title: "名称",
      dataIndex: "name",
      width: 200,
      align: "center",
      ellipsis:true,
      key: "name",
    },
    {
      title: "开始时间",
      align: "center",
      width: 200,
      dataIndex: "sTime",
      key: "sTime",
    },
    {
      title: "完成时间",
      align: "center",
      width: 200,
      dataIndex: "dTime",
      key: "dTime",
    },
    {
      title: "耗时",
      align: "center",
      width: 200,
      key: "expend",
      dataIndex: "expend",
    },
    {
      title: "是否完成",
      align: "center",
      key: "completed",
      width: 150,
      dataIndex: "completed",
      render: (_, record) => (
        <Checkbox
          style={{ color: "green" }}
          onChange={(e) => updateTaskStatus(e, record)}
          defaultChecked={record.completed}
        />
      ),
    },
    {
      title: "备注",
      key: "notes",
      width: 300,
      // 操作col的宽度将省略
      ellipsis:true,
      align: "center",
      dataIndex: "notes",
    },
    {
      title: "操作",
      align: "center",
      fixed: "right",
      width: 100,
      dataIndex: "actions",
      render: (text, record, index) =>
        record.completed ? (
          <DeleteTaskComp id={record.id!} />
        ) : (
          <div>
            <DeleteTaskComp id={record.id!} />
            <EditTaskComp {...record} />
          </div>
        ),
    },
  ];

  /** 改变当前一页显示多少记录触发事件，修改filter的pageSize */
  const changePageSize = (current: number, pageSize: number) => {
    // message.success(current)
    eventBus.publish("setFilter",
    Object.assign(filter,{pageSize:current}))
    // console.log(111,Object.assign(filter,{pageSize:current}))
  };

  /** 改变当前页触发事件,修改filter的pageNum */ 
  const changePage = (current: number) => {
    eventBus.publish("setFilter",
    Object.assign(filter,{pageNum:current}))
    queryTasks()
    // console.log(222,Object.assign(filter,{pageNum:current}))
  };

  // 表格分页属性(到时候查询后台，这个地方需要重新组织)
  const paginationProps = {
    showSizeChanger: true,
    showQuickJumper: false,
    showTotal: () => `共${page.totalItems}条,当前页共${page.pageItems}条`,
    pageSize: page.pageSize,
    current: page.pageNo,
    total: page.totalItems,
    onShowSizeChange: (current: number, pageSize: number) =>
      changePageSize(pageSize, current),
    onChange: (current: number) => changePage(current),
  };

  return (
    <div className="task-list">
      <Table
        rowKey="id"
        pagination={paginationProps}
        loading={isLoading}
        columns={columns}
        dataSource={taskList}
      />
    </div>
  );
};

export default TaskList;
